<div class="advancedSearchBox" ng-class="{active:focus}" ng-init="focus = false">
    <span ng-show="searchParams.length < 1 && searchQuery.length === 0" class="search-icon glyphicon glyphicon-search"></span>
    <a ng-href="" ng-show="searchParams.length > 0 || searchQuery.length > 0" ng-click="removeAll()" role="button">
        <span class="remove-all-icon glyphicon glyphicon-trash"></span>
    </a>
    <div>
        <div class="search-parameter" ng-repeat="searchParam in searchParams">
            <a ng-href="" ng-click="removeSearchParam($index)" role="button">
                <span class="remove glyphicon glyphicon-trash"></span>
            </a>
            <div class="key">{{searchParam.name}}:</div>
            <div class="value">
                <span ng-show="!searchParam.editMode" ng-click="enterEditMode($index)">{{searchParam.value}}</span>
                <input name="value"
                       type="text"
                       nit-auto-size-input
                       nit-set-focus="searchParam.editMode"
                       ng-keydown="keydown($event, $index)"
                       ng-blur="leaveEditMode($index)"
                       ng-show="searchParam.editMode"
                       ng-model="searchParam.value"
                       placeholder="{{searchParam.placeholder}}" />
            </div>
        </div>
        <input name="searchbox"
               class="search-parameter-input"
               type="text"
               nit-set-focus="setSearchFocus"
               ng-keydown="keydown($event)"
               placeholder="{{placeholder}}"
               ng-focus="focus = true"
               ng-blur="focus = false"
               typeahead-on-select="typeaheadOnSelect($item, $model, $label)"
               typeahead="parameter as parameter.name for parameter in parameters | filter:{name:$viewValue} | limitTo:8"
               ng-model="searchQuery" />
    </div>
    <div class="search-parameter-suggestions" ng-show="parameters && focus">
        <span class="title">Parameter Suggestions:</span>
        <span class="search-parameter" ng-repeat="param in parameters | limitTo:8" ng-mousedown="addSearchParam(param)">{{param.name}}</span>
    </div>
</div>